
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="renderer" content="webkit" />
<title>主页</title>

    <link rel="stylesheet" type="text/css" href="../../../plugins/bootstrap/3.3.7/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../../../plugins/jquery-easyui/1.8.6/themes/gray/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../../../plugins/jquery-easyui/1.8.6/themes/icon.css" />
    <!-- font-awesome图标字体 -->
    <link rel="stylesheet" href="../../../plugins/font-awesome/css/font-awesome.min.css" />
    
    
    <link rel="stylesheet" type="text/css" href="../../../css/zbootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/zeasyui.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/common.css" />
    
    <script type="text/javascript" src="../../../plugins/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="../../../plugins/jquery-rstorage/1.3.2/jquery.rStorage.min.js"></script>
    <script type="text/javascript" src="../../../plugins/jquery-easyui/1.8.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../../plugins/json-editor-master/dist/jsoneditor.js"></script>
    
    <script type="text/javascript" src="../../../js/zGlobal.js"></script>
    <script type="text/javascript" src="../../../js/zApi.js"></script>
    <script type="text/javascript" src="../../../js/zUtil.js"></script>
    <script type="text/javascript" src="../../../js/zAlert.js"></script>
    <script type="text/javascript" src="../../../js/zDict.js"></script>
    <script type="text/javascript" src="../../../js/zTable.js"></script>
    <script type="text/javascript" src="../../../js/zDialog.js"></script>
    <script type="text/javascript" src="../../../js/zForm.js"></script>
    <script type="text/javascript" src="../../../js/zJson.js"></script>
    
    <![if IE]>

    <![endif]>

</head>
<body onload="noright(document.body);">

  <div class="easyui-layout" data-options="fit:true"> 
   <div class="main-content"> 
    <div id="p-all" class="easyui-layout" data-options="fit:true,border:false," style="border: 0px solid #D8D9E5;"> 
     <div data-options="region:'center',split:false,border:false" style="overflow: hidden;width:100%;border-right:1px solid rgb(210, 208, 208);"> 
      <table id="table-left"></table> 
     </div> 
    </div> 
   </div> 
  </div>

  <!---分割-------------------------------------------------------------------------------->
  <div id="dlg-add-left" style="display:none;"> 
   <div class="main-content"> 
    <form>
     <div class="row">&nbsp;</div>
     <div class="row padding-right"> 
     <div class="col-sm-6"> 
      <label class="form-lable">所属项目</label> 
      <div class="input-block"> 
        <select class="easyui-combobox" id="projectId" name="projectId" data-options="required:true" style="width:100%;" ></select>
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">组件标题</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="componentTitle" name="componentTitle" data-options="required:true" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">组件编码</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="componentCode" name="componentCode" data-options="required:true" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">组件样式</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="componentClazz" name="componentClazz" data-options="" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">组件类型</label> 
      <div class="input-block"> 
        <input class="easyui-combobox" id="componentType" name="componentType" data-options="required:true" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-12"> 
      <label class="form-lable">组件配置定义</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="componentOption1" name="componentOption1" data-options="multiline:true,height:80" style="width:100%;" /> 
        <div id="attrExtendField_btn">
          <a href="javascript:void(0)" class="easyui-linkbutton" onclick="dlgJeditor('LA1')">视图编辑</a>
        </div>
      </div> 
     </div> 
     <div class="col-sm-12 hidden"> 
      <label class="form-lable">组件模板定义</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="componentTemplate" name="componentTemplate" data-options="multiline:true,height:80" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">备注</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="remarks" name="remarks" data-options="" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">排序</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="orderNum" name="orderNum" data-options="" style="width:100%;" /> 
      </div> 
     </div> 
     </div> 
    </form> 
   </div> 
  </div>


  <div id="dlg-edit-left" style="display:none;"> 
   <div class="main-content"> 
    <form>
     <div class="row">&nbsp;</div>
     <div class="row padding-right"> 
     <div class="col-sm-6"> 
      <label class="form-lable">组件主键ID</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="componentId" name="componentId" data-options="" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">所属项目</label> 
      <div class="input-block"> 
        <select class="easyui-combobox" id="projectId" name="projectId" data-options="required:true" style="width:100%;" ></select>
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">组件标题</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="componentTitle" name="componentTitle" data-options="required:true" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">组件编码</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="componentCode" name="componentCode" data-options="required:true" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">组件样式</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="componentClazz" name="componentClazz" data-options="" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">组件类型</label> 
      <div class="input-block"> 
        <input class="easyui-combobox" id="componentType" name="componentType" data-options="required:true" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-12"> 
      <label class="form-lable">组件配置定义</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="componentOption1" name="componentOption1" data-options="multiline:true,height:80" style="width:100%;" /> 
         <div id="attrExtendField_btn">
          <a href="javascript:void(0)" class="easyui-linkbutton" onclick="dlgJeditor('LE1')">视图编辑</a>
        </div>
      </div> 
     </div> 
     <div class="col-sm-12 hidden"> 
      <label class="form-lable">组件模板定义</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="componentTemplate" name="componentTemplate" data-options="multiline:true,height:80" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">备注</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="remarks" name="remarks" data-options="" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">排序</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="orderNum" name="orderNum" data-options="" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">状态</label> 
      <div class="input-block"> 
        <input class="easyui-combobox" id="dataStatus" name="dataStatus" data-options="required:true" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">创建操作员</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="createOprid" name="createOprid" data-options="" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">创建操作员姓名</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="createName" name="createName" data-options="" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">创建时间</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="createTm" name="createTm" data-options="" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">更新操作员</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="lastUpdOprid" name="lastUpdOprid" data-options="" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">更新操作员姓名</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="lastUpdName" name="lastUpdName" data-options="" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <label class="form-lable">更新时间</label> 
      <div class="input-block"> 
        <input class="easyui-textbox" id="lastUpdTm" name="lastUpdTm" data-options="" style="width:100%;" /> 
      </div> 
     </div> 
     </div> 
    </form> 
   </div> 
  </div>

  <div id="dlg-query-left" style="display:none;">
   <div class="main-content">
    <form>
     <div class="row padding-right">
     <div class="col-sm-12"> 
      <label class="form-lable">组件主键ID</label> 
      <div class="input-block">
        <input class="easyui-textbox" id="componentId" name="componentId" data-options="" style="width:100%;" /> 
      </div> 
     </div> 
     <div class="col-sm-12"> 
      <label class="form-lable">所属项目</label> 
      <div class="input-block">
        <select class="easyui-combobox" id="projectId" name="projectId" data-options="multiple:false" style="width:100%;" ></select>
      </div> 
     </div> 
     <div class="col-sm-12"> 
      <label class="form-lable">组件标题</label> 
      <div class="input-block">
        <input class="easyui-textbox" id="componentTitle" name="componentTitle" data-options="" style="width:100%;" /> 
      </div> 
     </div> 
     </div> 
    </form>
   </div>
  </div>
  
  <div id="dlg-jeditor" style="display:none;">
   <div class="main-content">
    <form>
     <div class="row padding-right">
       <div class="col-sm-12"> 
       <div id="jsonedit_JSON" class="jsonedit" style="padding: 5px 0;"></div>
       </div>
     </div> 
    </form>
   </div>
  </div>


 <script>
  TableToggleFlag = true;//默认开启联动
  DictNames = {};
  
  /* --分割------------------------------------------------------------------------------ */
  
  TitleLeft = "前端组件";
  IdDlgAddLeft = "#dlg-add-left";
  IdDlgEditLeft = "#dlg-edit-left";
  IdDlgQueryLeft = "#dlg-query-left";
  IdTableLeft = "#table-left";
  TableHeaderLeftMenu = null;
  
  /* --分割------------------------------------------------------------------------------ */
  
  IdDlgJeditor = "#dlg-jeditor";
  JsonJeditor = null;
  JsonReadonly = false;
  IdDlgConfig = "#dlg-config";
  
  
  /* --分割------------------------------------------------------------------------------ */
  zUtil.dictLoadSyncOfAutocode("dict.dataStatus,component.componentType");
  zUtil.dictLoadSyncOfAutocode("ZSELECT_PROJECT");
  $(function(){
    zUtil.areaSize();
    /* --分割------------------------------------------------------------------------------ */
    
    var urlLeft = zGlobal["http"] + "/api/autocode/webComponent/list";
    var buttonsIdxLeft = [0,4];
    var buttonsFuncLeft = [dlgAddLeft,dlgQueryLeft];
    var optionsLeft = {
            queryParams:{},
            url : urlLeft,
            idField: 'componentId',
            sortName: 'projectId,orderNum',
            columns:[[
                {field: 'componentId', title: '组件主键ID', align: 'center', width: 100, hidden:true},
                {field: 'projectId', title: '所属项目', align: 'center', width: 150,sortable: true, formatter: function(value,rowData,rowIndex){return zUtil.dictConvertOfAutocode(value,"ZSELECT_PROJECT")} },
                {field: 'componentTitle', title: '组件标题', align: 'center', width: 150},
                {field: 'componentCode', title: '组件编码', align: 'center', width: 150},
                {field: 'componentClazz', title: '组件样式', align: 'center', width: 150},
                {field: 'componentType', title: '组件类型', align: 'center', width: 100, formatter: function(value,rowData,rowIndex){ return zUtil.dictConvertOfAutocode(value,"component.componentType")}},
                {field: 'remarks', title: '备注', align: 'center', width: 150},
                {field: 'orderNum', title: '排序', align: 'center', width: 100,sortable: true},
                {field: 'dataStatus', title: '状态', align: 'center', width: 80, formatter: function(value,rowData,rowIndex){ return zUtil.dictConvertOfAutocode(value,"dict.dataStatus")}},
                {field: 'createName', title: '创建操作员', align: 'center', width: 100},
                {field: ' ', title: ' ', align: 'center', width: 100},
            ]],
            frozenColumns:[[
//              {field:'', title:'', align:'center', checkbox:true},
             {field:'buttonArr', title:'操作', align:'center', width: 60, formatter:buttonsFormatterLeft},
            ]],
            onDblClickRow: function(rowIndex, rowData){
               dlgDtlLeft(rowData);
            },
            onSelect: function(rowIndex, rowData){
              
            },
            onHeaderContextMenu: function(e, field){
              TableHeaderLeftMenu = zUtil.tableHeaderMenu(e,TableHeaderLeftMenu,IdTableLeft);
            },
            onRowContextMenu: function(e, rowIndex, rowData){
              e.preventDefault();
              zUtil.tableSelected(IdTableLeft,rowIndex);
              if(rowData != null){
                dlgEditLeft(rowData);
              }
            },
    };
    zUtil.tableInit(IdTableLeft,optionsLeft,buttonsIdxLeft,buttonsFuncLeft);
    
    /* --分割------------------------------------------------------------------------------ */
    DictNames['ZSELECT_PROJECT'] = 'projectId';
    DictNames['dict.dataStatus'] = 'dataStatus';
    DictNames['component.componentType'] = 'componentType';
    var linkSelsetIds = [IdDlgQueryLeft,IdDlgAddLeft,IdDlgEditLeft];
    $.each(linkSelsetIds,function(i,item){
        zUtil.selectFill(item,DictNames,zDictAutocode);
    });
  });
  
  /* --分割------------------------------------------------------------------------------ */
  
  //TODO
  function buttonsFormatterLeft(value,rowData,rowIndex){
    return '<a href="javascript:void(0)" class="easyui-linkbutton" onclick="dlgDelLeft('+rowIndex+');" title="删除" ><i class="fa fa-trash"> </i></a>'
          +' <a href="javascript:void(0)" class="easyui-linkbutton" onclick="dlgAddLeft('+rowIndex+');" title="复制" ><i class="fa fa-files-o"> </i></a>';
  }
  //TODO
  function dlgQueryLeft(){
    var dlgSave = function(){
      var params = zUtil.valAll(IdDlgQueryLeft);
      zUtil.tableQuery(IdTableLeft,params);
    };
    var dlgClear = function(){
      zUtil.formClear(IdDlgQueryLeft + ' form');
    };
    var dlgClose = function(){
      zUtil.dialogClose(IdDlgQueryLeft);
    };
    var dlgOptions = {
      title: TitleLeft + '-查询',
    };
    var dlgButtonsIdx = [0,1,2];
    var dlgButtonsFunc =  [dlgSave,dlgClear,dlgClose];
    zUtil.queryInit(IdDlgQueryLeft,dlgOptions,dlgButtonsIdx,dlgButtonsFunc);
    zUtil.dialogOpen(IdDlgQueryLeft);
  };
  //TODO
  function dlgQueryxLeft(){
    //zUtil.dialogOpen(IdDlgQueryxLeft);
  };
  //TODO
  function dlgAddLeft(row){
    zUtil.formClear(IdDlgAddLeft + ' form');
    zUtil.readonlyAll(IdDlgAddLeft,false);
    JsonReadonly = false;
    
    if("number" === $.type(row)){
        zUtil.tableSelected(IdTableLeft,row);
        row = zUtil.tableRows(IdTableLeft);
        var params = {};
        params['componentId']  = row['componentId'];
        var detail = zUtil.ajaxGetSync(zGlobal["http"] + "/api/autocode/webComponent/detail", params);
        if(zCode["GLOBAL_SUCCESS"] != zUtil.getVal(detail,zConst["busCode"])){
          zUtil.msg('获取信息失败');
          return false;
        }
        detail = detail["resData"];
        zUtil.valAll(IdDlgAddLeft,detail);
    }
    
    var dlgSave = function(){
      if(!zUtil.formCheck(IdDlgAddLeft +' form')){
        return false;
      };
      var params = zUtil.valAll(IdDlgAddLeft);
      var reqData = {reqData: params};
      var result = zUtil.ajaxPostSync(zGlobal["http"] + "/api/autocode/webComponent/add", reqData);
      if(zCode["GLOBAL_SUCCESS"] == zUtil.getVal(result,zConst["busCode"])){
        var params = zUtil.valAll(IdDlgQueryLeft);
        zUtil.tableQuery(IdTableLeft,params);
        zUtil.dialogClose(IdDlgAddLeft);
      }else{
        zUtil.msg('保存失败');
        return false;
      }
    };
    var dlgClose = function(){
      zUtil.dialogClose(IdDlgAddLeft);
    };
    var dlgOptions = {
       title: TitleLeft + '-新增',
    };
    var dlgButtonsIdx = [0,1];
    var dlgButtonsFunc =  [dlgSave,dlgClose];
    zUtil.dialogInit(IdDlgAddLeft,dlgOptions,dlgButtonsIdx,dlgButtonsFunc);   
    zUtil.dialogOpen(IdDlgAddLeft);
  };
  //TODO  
  function dlgEditLeft(row){
    if($.isNumeric(row)){
      zUtil.tableSelected(IdTableLeft,row);
      row = zUtil.tableRows(IdTableLeft);
    }
    
    zUtil.formClear(IdDlgEditLeft + ' form');
    zUtil.readonlyAll(IdDlgEditLeft,false);
    zUtil.readonly(IdDlgEditLeft + ' #componentId');
    zUtil.readonly(IdDlgEditLeft + ' #projectId');
    zUtil.readonly(IdDlgEditLeft + ' #dataStatus');
    zUtil.readonly(IdDlgEditLeft + ' #createOprid');
    zUtil.readonly(IdDlgEditLeft + ' #createName');
    zUtil.readonly(IdDlgEditLeft + ' #createTm');
    zUtil.readonly(IdDlgEditLeft + ' #lastUpdOprid');
    zUtil.readonly(IdDlgEditLeft + ' #lastUpdName');
    zUtil.readonly(IdDlgEditLeft + ' #lastUpdTm');
    JsonReadonly = false;
    
    var params = {};
    params['componentId']  = row['componentId'];
    var detail = zUtil.ajaxGetSync(zGlobal["http"] + "/api/autocode/webComponent/detail", params);
    if(zCode["GLOBAL_SUCCESS"] != zUtil.getVal(detail,zConst["busCode"])){
      zUtil.msg('获取信息失败');
      return false;
    }
    detail = detail["resData"];
          
    var dlgSave = function(){
      if(!zUtil.formCheck(IdDlgEditLeft +' form')){
        return false;
      };
      var params = zUtil.valAll(IdDlgEditLeft);
      var reqData = {reqData: params};
      var result = zUtil.ajaxPostSync(zGlobal["http"] + "/api/autocode/webComponent/edit", reqData);
      if(zCode["GLOBAL_SUCCESS"] == zUtil.getVal(result,zConst["busCode"])){
        var params = zUtil.valAll(IdDlgQueryLeft);
        zUtil.tableQuery(IdTableLeft,params);
        zUtil.dialogClose(IdDlgEditLeft);
      }else{
        zUtil.msg('保存失败');
        return false;
      }
    };
    var dlgClose = function(){
      zUtil.dialogClose(IdDlgEditLeft);
    };
    var dlgOptions = {
      title: TitleLeft + '-编辑',
    };
    var dlgButtonsIdx = [0,1];
    var dlgButtonsFunc =  [dlgSave,dlgClose];
    zUtil.dialogInit(IdDlgEditLeft,dlgOptions,dlgButtonsIdx,dlgButtonsFunc);
    zUtil.valAll(IdDlgEditLeft,detail);
    zUtil.dialogOpen(IdDlgEditLeft);
  };
  //TODO
  function dlgDtlLeft(row){
    if($.isNumeric(row)){
      zUtil.tableSelected(IdTableLeft,row);
      row = zUtil.tableRows(IdTableLeft);
    }
    zUtil.formClear(IdDlgEditLeft + ' form');
    zUtil.readonlyAll(IdDlgEditLeft);
    JsonReadonly = true;
    
    var params = {};
    params['componentId']  = row['componentId'];
    var detail = zUtil.ajaxGetSync(zGlobal["http"] + "/api/autocode/webComponent/detail", params);
    if(zCode["GLOBAL_SUCCESS"] != zUtil.getVal(detail,zConst["busCode"])){
      zUtil.msg('获取信息失败');
      return false;
    }
    detail = detail["resData"];
          
    var dlgClose = function(){
      zUtil.dialogClose(IdDlgEditLeft);
    };
    var dlgOptions = {
      title: TitleLeft + '-详情',
    };
    var dlgButtonsIdx = [1];
    var dlgButtonsFunc =  [dlgClose];
    zUtil.dialogInit(IdDlgEditLeft,dlgOptions,dlgButtonsIdx,dlgButtonsFunc);
    zUtil.valAll(IdDlgEditLeft,detail);
    zUtil.dialogOpen(IdDlgEditLeft);
  };
  //TODO
  function dlgDelLeft(row){
    if($.isNumeric(row)){
      zUtil.tableSelected(IdTableLeft,row);
      row = zUtil.tableRows(IdTableLeft);
    }
    
    var params = {}; 
    params['componentId']  = row['componentId'];
    var reqData = {reqData: params};
    var okfunc = function(){
    var result = zUtil.ajaxPostSync(zGlobal["http"] + "/api/autocode/webComponent/del", reqData);
      if(zCode["GLOBAL_SUCCESS"] == zUtil.getVal(result,zConst["busCode"])){
        var params = zUtil.valAll(IdDlgQueryLeft);
        zUtil.tableQuery(IdTableLeft,params);
      }else{
        zUtil.msg('操作失败');
        return false;
      }
    }
    zUtil.msgConfirm("确认删除已选中记录?",okfunc);
  };
  
  /* --分割------------------------------------------------------------------------------ */
  //TODO
  function dlgJeditor(type){
    var jsonOpts = attrDefine();
    
    if(type === "LA1" || type === "LE1"){
        jsonOpts = $.extend(true,jsonOpts,{
                "schema": {
                  "required": ["componentOptionJSON1","componentTemplateJSON"]
                 }
        });
    }
    
    if(JsonJeditor !== null){
        zUtil.jeditorClear(JsonJeditor);
    }
    
    var dlgId = null;
    if(type === "LA1"){
      dlgId =  IdDlgAddLeft;
    }else if(type === "LE1"){
      dlgId =  IdDlgEditLeft;
    }
    
    var configVal = [];
    var componentOption1Val = zUtil.parse(zUtil.val(dlgId + " #componentOption1"));
//     var componentOption2Val = zUtil.parse(zUtil.val(dlgId + " #componentOption2"));
//     var componentTemplateVal = zUtil.parse(zUtil.val(dlgId + " #componentTemplate"));
    if(componentOption1Val!=null){
      configVal = componentOption1Val;
    }
    
    JsonJeditor = zUtil.jeditor(IdDlgJeditor + " #jsonedit_JSON",jsonOpts,configVal);
    
    var dlgSave = function(){
        const data = zUtil.jeditorData(JsonJeditor);
        console.log(data);
        if(data != null){
          zUtil.val(dlgId + " #componentOption1", zUtil.strify(data));
        }
        zUtil.jeditorClear(JsonJeditor);
        zUtil.dialogClose(IdDlgJeditor);
    };
    var dlgClose = function(){
      zUtil.jeditorClear(JsonJeditor);
      zUtil.dialogClose(IdDlgJeditor);
    };
    var dlgOptions = {
      title: 'JSON编辑',
    };
    var dlgButtonsIdx = [0,1];
    var dlgButtonsFunc =  [dlgSave,dlgClose];
    if(JsonReadonly){
        dlgButtonsIdx = [1];
        dlgButtonsFunc = [dlgClose];
    }
    zUtil.dialogInit(IdDlgJeditor,dlgOptions,dlgButtonsIdx,dlgButtonsFunc);   
    zUtil.dialogOpen(IdDlgJeditor);
  }
  function attrDefine(){
      const attrExJson = {
              "type": "object",
              "title": "属性",
              "required": ["code","title","must","value","type","desc"],
              "format": "grid",
              "properties": {
                  "code":{
                      "type": "string",
                      "title": "编码",
                      "readOnly": JsonReadonly,
                      "options": {
                          "input_width": '120px',
                      }
                   },
                  "title":{
                      "type": "string",
                      "title": "名称",
                      "readOnly": JsonReadonly,
                      "options": {
                          "input_width": '150px',
                      }
                  },
                  "must":{
                      "type": "boolean",
                      "title": "必填",
                      "default":false,
                      "readOnly": JsonReadonly,
                      "options": {
                          "input_width": '90px',
                      }
                  },
                  "type":{
                      "type": "string",
                      "title": "类型",
                      "enum": ["string", "number", "array", "function","boolean"],
                      "default":"string",
                      "readOnly": JsonReadonly,
                      "options": {
                          "enum_titles": ["字符", "数字", "数组","方法","布尔"],
                          "input_width": '90px',
                      }
                  },
                  "value":{
                      "type": "string",
                      "title": "默认值",
                      "readOnly": JsonReadonly,
                      "options": {
                          "input_width": '150px',
                      }
                  },
                  
                  "desc":{
                      "type": "string",
                      "title": "描述",
                      "readOnly": JsonReadonly,
                      "format": "textarea",
                      "options": {
                          "input_width": '250px',
                      }
                  },
                  
              }
      };
        var jsonOpts = {
                "schema": {
                     "type": "array",
                     "title": "组件配置定义",
                     "uniqueItems": true,
                     "format": "table",
                     "options": {
                        "disable_collapse": true,
                     },
                     "items": attrExJson
                }
                ,
                "theme": "bootstrap3",
                "disable_array_add": JsonReadonly,
                "disable_array_delete": JsonReadonly,
                "disable_array_reorder": JsonReadonly, 
        };
        return jsonOpts;
  }
  
  </script>

</body>
</html>